// 按钮组件
Vue.component("qfButton",{
    // props:['content'],
    props:{
    content:{
        type:String,
        required:true,
    }
    },
    template:`<button>{{content}}</button>`
})

// qfPage组件
Vue.component('qfPage',{
    props:{
        total:{
            type:Number,
            required:true,
        },
        pagesize:{
            type:Number,
            required:true,
        }
    },
    data(){
        return{
            totalPage:0,
        };
    },
    watch:{
        total:{
            handler(newdata,olddata){
             this.totalPage = Math.ceil(this.total / this.pagesize);
            },
            immediate: true,
        }
    },

    template:`<div class="qf-Page">
    <span @click="$emit('change-page',num)" v-for="num in totalPage">{{num}}</span>
    
    </div>
    `,
})


// qfDialog组件

Vue.component('qfDialog',{
    template:`<div class="qf-dialog">
    <div class="box">
       <header>
        <h2>标题</h2>
        
        <span @click="$emit('close')">x</span>
        </header>
        <hr/>
        <main>
           <slot></slot>
        </main>
        <hr/>
        <footer>
          <slot name="footer"></slot>
        </footer>
    </div>
    </div>
    `,
})


// qfLoading2组件
Vue.component("qfLoading2",{
    template:`
    <div class="qf-loading2" @click="$emit('close')">
    <span>loading...</span>
   
    </div>
    `,
})



// qfLoading1组件
Vue.component("qfLoading1",{
    template:`
    <div class="qf-loading1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    </div>
    `,
})

Vue.component("qfNavBar",{
    props:{
        title:{
            type:String,
            Request:true,
        },
    },

    template:`<div class="qf-nav-bar">
    <div >返回</div>
    <div>{{title}}</div>
    <div > 搜索</div>
   </div>`,
    
    
    
    data(){
        return {
    
        };
    },
    methods: {
      
    },
    watch: {},
    computed: {},

})